@import "mixin";
@import "mymixin";

$hover-color: #ff6700;
$font-color-s: #9d9d9d;
$color-ss: #eee;
$font-color-h: #333;
$menu-li: 10;
$color-mild: #e0e0d1;

@media (max-width: 767px) {
body { padding-top: 50px; }
.mybtn-shopcar, .myshopcar-panel { display: none; }
.mytopnav { margin-bottom: 20px; }
.secondul { display: block; }
.mynav2, #firstul { display: none; }
.nav-sm { display: block; margin-top: 20px; }
.mynav2search { margin-top: 22px; button[type="submit"] { display: none; } }
.mygiflogo { width: 75%; margin-top: 10px; }
.mymilogo {  width: 25%; background-color: $hover-color; margin-top: 15px; border-radius: 3px; }
.mymenu { background: #333; @include opacity(0.6); width: 40%; position: relative; margin-bottom: 10px;
		 ul { height: 100%; }
		 li { height: 100 / $menu-li * 0.99%; color: #fff; position: relative; font-size: 8px; padding-left: 10%;
		 	 &:hover { background-color: $hover-color; }
		 	 a { color: inherit; line-height: 2;
		 	 	 &:hover { text-decoration: none; } }
		 	 span { position: absolute; top: 0; right: 10%; line-height: 2; } } }
.lisay { position: absolute; top: 0; left: 100%; width: 148%; height: 92%; background-color: $color-ss; border: 1px solid $font-color-h; border-radius: 2.5px; margin: 4%; margin-left: 0; box-shadow: 3px 3px 3px $color-ss; padding: 10px; display: none; }
.mybox { background-color: #5f5750;
 		 li { padding: 5% 5%;
 			 a { @include opacity(0.6); @include transition(opacity 0.3s); font-size: 14px; color: #fff;
 				 &:hover { @include opacity(1); text-decoration: none; } } } }
.mylook { color: $font-color-s; @include transition(color 0.3s); font-size: 14px;
			&:hover { text-decoration:none; color: $hover-color; } }
.oathree { display: inline-block; margin-top: 10px; }
#picleft { display: none; }
article > div:nth-child(5) { background-color: #f5f5f5; }
.mypic-sm { background-color: #fff; position: relative; img { width: 100%; max-width: 160px; margin-bottom: 15%; } }
.mydiscount { position: absolute; top: 0; left: 50%; width: 40%; margin-left: -20%; color: #fff; }
.mypic-sm-panel { width: 100%; bottom: 0; height: 30%; display: none; position:absolute; background-color: $hover-color; }
.myservices { color: $font-color-s;
			  span:first-child { font-size: 12px; @include transition(color .2s); padding: 10px;
			 					 &:hover{ color: $hover-color; } }
			  div:not(:last-child) span:last-child { @include divider(10%, 0, 50px); }}
.mylink {  text-align: center; li { color: $font-color-s; &:hover { color: $hover-color; } } }
.mysersta { text-align: center;
			h4 { color: $hover-color; }
			p { font-size: 12px; color: $font-color-s; }
			button { color: $hover-color; @include transition(all 0.3s); &:hover { color: #fff; background-color: $hover-color; } } }
.footerlogo { margin-right: 10px; max-width: 49px; }
.myinfo { color: $font-color-s; margin-top: 20px;  margin-top: 15px; font-size: 12px; }
.myseal a { padding: 15px 0 0; }
}